<!-- 滑动切换选项卡演示(标准写法) -->
<template>
	<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
	<view class="container">
		<z-paging-swiper>
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
			<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
			<template #top>
				<navigationBar title="帖子" :isFixed="false"/>
				<z-tabs 
					ref="tabs" 
					:list="tabList" 
					:current="current" 
					@change="tabsChange" 
					:barWidth="'26rpx'" 
					:activeColor="'#16DFF2'" 
					:activeStyle="activeStyle"
					:inactiveStyle="inactiveStyle"
				/>
				
			</template>
			<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
			<swiper class="swiper" :current="current" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
				<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
					<!-- 这里的swiper-list-item为demo中为演示用定义的组件，列表及分页代码在swiper-list-item组件内 -->
					<!-- 请注意，swiper-list-item非z-paging内置组件，在自己的项目中必须自己创建，若未创建则会报组件不存在的错误 -->
					<swiperListItem :tabIndex="index" :currentIndex="current"></swiperListItem>
				</swiper-item>
			</swiper>
			
		</z-paging-swiper>
	</view>
	
</template>

<script setup>
	import { ref,reactive} from 'vue';
	import request from '/http/request.js';
  import swiperListItem from './swiperListItem.vue'
	
	
  const paging = ref(null);
	const tabs = ref(null);
	
	const current = ref(0);
	const tabList = ref(['发帖','收藏','评论','点赞']);
	const activeStyle = reactive({
    color: '#111111',
    fontSize: '28rpx',
    fontWeight: 500
  })
  const inactiveStyle = reactive({
    color: '#838286',
    fontSize: '28rpx',
    fontWeight: 400
  })
	const goBack = () => {
		uni.navigateBack({ delta: 1 })
	}
	
	// tabs通知swiper切换
	const tabsChange = (index) => {
		current.value = index;
	}
	
	// swiper滑动中
	const swiperTransition = (e) => {
		tabs.value.setDx(e.detail.dx);
	}
	
	// swiper滑动结束
	const swiperAnimationfinish = (e) => {
		current.value = e.detail.current;
		tabs.value.unlockDx();
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100vw;
		height: 100vh;
  	background: linear-gradient( 180deg, #FFFFFF 0%, #F4F3F7 100%);
	}
	.swiper {
		// height: calc(100% - env(safe-area-inset-bottom));
		height: 100%;
	}

  .z-tabs-conatiner{
    border-bottom: 2rpx solid #F1F1F1;
    height: 76rpx;
  }
  .fixed-con {
		background-color: white;
  }

	//没有更多了  文字的下边距
	::v-deep .zp-l-container{
		padding-bottom: constant(safe-area-inset-bottom) !important;
		padding-bottom: env(safe-area-inset-bottom) !important;
	}
</style>

